<template>
	<view class="content">
		<view :style="{paddingTop:data.statusBarHeight+'rpx'}" class="head-box">
			<image src="../../../static/img/img/my-bg.png" class="my-bg"></image>
			<view class="my-info flex-align-center">
				<img class="head-img" :src="data.info.avatar" alt="">
				<view class="head-right">
					<navigator hover-class="none" url="/pages/personalInfo/personalInfo"
						class="username flex-justify-s">
						<text>{{data.info.name}}</text>
						<uv-icon name="arrow-right" color="#fff" size="14"></uv-icon>
					</navigator>
					<view class="flex-align-center">
						<img @click="changeIdentity" class="my-sf" src="../../../static/img/img/my-sf.png" alt="">
						<text class="slogan">{{data.info.signature?data.info.signature:'还没有个性签名～'}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 管理员shenf -->
		<view class="" v-if="data.isSowmManagePage && data.admin">
			<view class="menu-box">
				<view class="menu-b menu-b-gl flex-justify-s">
					<view class="blue-btn" @click="verificationCode">开始核验</view>
				</view>
		
			</view>
		</view>
		<view class="" v-else>
			<!-- 菜单 -->
			<view class="menu-box">
				<view class="menu-b  flex-justify-s">
					<view @click="goFollow" class="mneu-item flex-center-r">
						<img class="menu-icon" src="../../../static/img/img/my-gz.png" alt="">
						<text class="menu-text">关注</text>
					</view>
					<view @click="goOrder" class="mneu-item flex-center-r ">
						<img class="menu-icon" src="../../../static/img/img/my-dd.png" alt="">
						<text class="menu-text">订单</text>
					</view>
					<navigator url="/pages/member/member" hover-class="none" class="mneu-item flex-center-r ">
						<img class="menu-icon" src="../../../static/img/img/my-vip.png" alt="">
						<text class="menu-text">会员</text>
					</navigator>
				</view>

			</view>
			<!-- 帮助中心 -->
			<view class="help-box">
				<view class="title">帮助中心</view>
				<view class="hele-list">
					<view class="item flex-justify-s">
						<view class="flex-align-center">
							<img class="icon" src="../../../static/img/img/my-kf.png" alt="">
							<text class="title-text">客服咨询</text>
						</view>
						<text class="title-text">0851-8866666</text>
					</view>
					<navigator url="/pages/complain/complain" hover-class="none" class="item flex-justify-s">
						<view class="flex-align-center">
							<img class="icon" src="../../../static/img/img/my-jy.png" alt="">
							<text class="title-text">投诉建议</text>
						</view>
						<uv-icon name="arrow-right" color="#707070" size="16"></uv-icon>
					</navigator>
					<view class="item flex-justify-s">
						<view class="flex-align-center">
							<img class="icon" src="../../../static/img/img/my-bb.png" alt="">
							<text class="title-text">当前版本</text>
						</view>
						<text class="title-text">v1.1.0</text>
					</view>
					<navigator hover-class="none" url="/pages/settings/settings" class="item flex-justify-s">
						<view class="flex-align-center">
							<img class="icon" src="../../../static/img/img/my-sz.png" alt="">
							<text class="title-text">设置</text>
						</view>
						<uv-icon name="arrow-right" color="#707070" size="16"></uv-icon>
					</navigator>
				</view>
			</view>
		</view>
		
		<!-- <tabBar :selectedIndex="3"></tabBar> -->
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		useStatusBarStore
	} from "@/store/index";
	import {verification} from '../../../requestApi/api.js';

	const statusBar = useStatusBarStore();
	const data = ref({
		statusBarHeight: 0,
		info: {},
		isSowmManagePage:false,
		admin:false,
	})
	onLoad(()=>{
		let userInfo=uni.getStorageSync('userInfo');
		data.value.admin=userInfo?userInfo.admin:false;
	})
	onShow(() => {
		data.value.statusBarHeight = statusBar.getStatusBarHeight();
		data.value.info = uni.getStorageSync('userInfo');
	})
	const changeIdentity=()=>{
		if(!data.value.admin) return;
		data.value.isSowmManagePage=!data.value.isSowmManagePage;
		if(data.value.isSowmManagePage){
			uni.hideTabBar();
		}else{
			uni.showTabBar();
		}
	};
	//核验
	const verificationCode=()=>{
		uni.scanCode({
			 success (res) {
			    console.log(res)
				let id=res.result;
				verification({
					id
				}).then(r=>{
					uni.showToast({
						title:'核销成功'
					})
				})
			  },
			  fail() {
			  	uni.showToast({
			  		icon:'error',
					title:'验证失败',
			  	})
			  }
			
		})
	};

	//去订单页
	function goOrder() {
		uni.switchTab({
			url: '/pages/tabbar/order/order'
		})
	}
	//去关注ye
	function goFollow() {
		uni.reLaunch({
			url: '/pages/tabbar/discover/discover?type=3'
		})
	}
</script>


<style lang="scss">
	@import "@/uni.scss";

	.head-box {
		width: 100vw;
		height: 462rpx;
		position: relative;

		.my-bg {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		.my-info {
			position: relative;
			z-index: 2;
			padding: 104rpx 30rpx 0;

			.head-img {
				width: 116rpx;
				height: 116rpx;
				border: 4rpx solid rgba(255, 255, 255, .5);
				border-radius: 50%;
				margin-right: 16rpx;
			}

			.head-right {
				flex: 1;

				.username {
					font-size: 50rpx;
					font-weight: bold;
					color: #FFFFFF;
					text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.11);
					margin-bottom: 10rpx;
				}

				.my-sf {
					width: 120rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}

				.slogan {
					font-size: 24rpx;
					color: rgba(255, 255, 255, .6);
				}
			}


		}
	}

	.menu-box {
		padding: 0 30rpx;
		margin-bottom: 60rpx;

		.menu-b {
			position: relative;
			z-index: 3;
			width: 100%;
			height: 178rpx;
			background: linear-gradient(200deg, #F8FAFF 0%, #FFFFFF 100%);
			border-radius: 16rpx;
			// background-color: #f00;
			margin-top: -100rpx;
			padding: 30rpx 40rpx 0;

			.mneu-item {
				.menu-icon {
					width: 104rpx;
					height: 93rpx;
				}

				.menu-text {
					font-size: 24rpx;
					color: #2C2C2C;
					transform: translateY(-50%);
				}
			}

		}

		.menu-b-gl {
			height: 262rpx;
			padding-top: 106rpx;
		}
	}

	.help-box {
		padding: 0 40rpx;

		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: #2C2C2C;
			margin-bottom: 40rpx;
		}

		.item {
			width: 100%;
			height: 100rpx;
			border-bottom: 2rpx solid #F9F9FA;

			.icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 26rpx;
			}

			.title-text {
				font-size: 28rpx;
				color: #3A444A;
			}


		}
	}
</style>